<template>
  <div class="nav">
    <!-- 标题 -->
    <div class="left-title">
      <img src="@/assets/logo.png" />
      <img src="@/assets/slogan/slogan-black1.png" />
      <!-- <span>2K17 Waigua+</span> -->
    </div>
    <!-- 模块导航栏 -->
    <div class="module-nav">
      <div
        class="nav-container"
        v-for="(data, index) in moduleList"
        :key="index"
      >
        <div
          :class="nav.selected ? 'module-1' : 'module-0'"
          v-for="(nav, index1) in data.children"
          :key="index1"
          @click="moduleSelect(nav)"
          :name="nav.name"
        >
          <img
            :src="
              require('@/assets/icon/' +
                (nav.name + (nav.selected ? '-1' : '-0')) +
                '.png')
            "
          />
          {{ nav.text }}
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";
import mainApi from "@/api/mainApi";

export default {
  name: "导航",
  data() {
    return {
      moduleList: [
        {
          children: [
            {
              name: "home",
              text: "首页",
              selected: true,
            },
            {
              name: "face",
              text: "球员面补",
              selected: false,
            },
            {
              name: "jersey",
              text: "NBA球衣",
              selected: false,
              needTeamSelect: true,
            },
            {
              name: "blacktop",
              text: "街头球场",
              selected: false,
            },
            {
              name: "court",
              text: "NBA地板",
              selected: false,
              needTeamSelect: true,
            },
            {
              name: "animation",
              text: "动作补丁",
              selected: false,
            },
            {
              name: "scoreborad",
              text: "NBA记分牌",
              selected: false,
            },
            {
              name: "packing",
              text: "Mod整合包",
              selected: false,
            },
          ],
        },
        {
          children: [
            {
              name: "upload",
              text: "Mod上传",
              selected: false,
            },
            {
              name: "setup",
              text: "参数配置",
              selected: false,
            },
          ],
        },
        {
          children: [
            {
              name: "author",
              text: "开发者列表",
              selected: false,
            },
          ],
        },
      ],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    let subList = [];

    onMounted(() => {
      mainApi.writeDailyLog("初始化渲染完成" + "--Nav.vue");
      subList.push(
        // 轮播图跳转模块
        pubsub.subscribe("bannerToModule", (n, data) => {
          mainApi.writeDailyLog(
            "轮播图跳转模块:" + data.moduleName + "--Nav.vue"
          );
          // 在模块列表中遍历匹配
          proxy.moduleList.forEach((list) => {
            list.children.forEach((module) => {
              if (module.name === data.moduleName) {
                console.log(module);
                // 模块选择
                moduleSelect(module);
              }
            });
          });
        }),
        // 头部链接选中模块响应
        pubsub.subscribe("moduleSelect", (n, data) => {
          mainApi.writeDailyLog(
            "头部链接选中模块响应:" + data.target + "--Nav.vue"
          );
          // 样式变换
          proxy.moduleList.forEach((module) => {
            module.children.forEach((element) => {
              if (element.name === data.target) {
                element.selected = true;
              } else {
                element.selected = false;
              }
            });
          });
        })
      );
    });

    // 模块选择
    function moduleSelect(data) {
      // 样式变换
      proxy.moduleList.forEach((module) => {
        module.children.forEach((element) => {
          element.selected = false;
        });
      });
      data.selected = true;
      // 模块名字传输
      let name = data.needTeamSelect ? "teamSelect" : data.name;
      mainApi.writeDailyLog("模块名字传输:" + name + "--Nav.vue");
      pubsub.publish("routerChange", {
        targetComponent: name,
        linkName: name,
        componentName: name,
        origin_nav: data.name,
        isNav: true,
      });
    }

    return {
      moduleSelect,
      subList,
    };
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>
  
<style lang="less" scoped>
@import "../less/variables.less";
.nav {
  width: 100%;
  height: 100%;
  > * {
    margin: 3% 5%;
    padding: 3% 0;
    // border: @border;
    // > * {
    //   border: @border;
    // }
  }
}
.left-title {
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: center;
  > img {
    width: 20%;
  }
  > img:last-child {
    width: 70%;
    margin-top: 5px;
  }
  > span {
    font-size: 160%;
    letter-spacing: 1.5px;
    font-family: "Agency FB";
    font-weight: bold;
  }
}
.module-nav {
  > .nav-container {
    border-bottom: #e4e8ec 3px solid;
    > div {
      margin: 4% 1%;
      padding: 4% 2%;
      display: block;
      display: flex;
      align-items: center;
      border-radius: 8px;
      font-size: 115%;
      > img {
        margin-left: 3%;
        margin-right: 6%;
        // width: 40px;
        width: 15%;
      }
    }

    > .module-0:hover {
      background-color: @gray;
      cursor: pointer;
    }
    > .module-1 {
      background-color: red;
      color: white;
    }
  }
}
</style>
  